<template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        @close="handleClose"
        width="30%"
        v-dialogDrag
        append-to-body
    >
        <el-form
            ref="formRef"
            :model="formData"
            v-loading="formLoading"
            label-width="100px"
        >
            <el-form-item
                label="域名"
                prop="domain"
                :rules="[
                    { required: true, message: '请输入域名', trigger: 'blur' },
                ]"
            >
                <el-input v-model="formData.domain" placeholder="请输入域名" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio v-model="formData.status" :label="1">正常</el-radio>
                <el-radio v-model="formData.status" :label="0">停用</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm"
                :disabled="formLoading"
                >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addDomain, editDomain } from "@/api/domain/index";
export default {
    data() {
        return {
            // 弹出层标题
            dialogTitle: "",
            // 是否显示弹出层,
            dialogVisible: false,
            formLoading: false,
            formData: {
                domain: "",
                status: 1,
            },
        };
    },
    methods: {
        /** 打开弹窗 */
        async open(row) {
            this.dialogVisible = true;
            // 修改时，设置数据
            if (row.id) {
                this.dialogTitle = "修改域名";
                this.formData = { ...this.formData, ...row };
            } else {
                this.dialogTitle = "新增域名";
            }
        },
        /** 提交按钮 */
        async submitForm() {
            // 校验主表
            await this.$refs["formRef"].validate();
            this.formLoading = true;
            try {
                const data = this.formData;
                // 修改的提交
                if (data.id) {
                    await editDomain(data);
                    this.$modal.msgSuccess("修改成功");
                    this.dialogVisible = false;
                    this.$emit("success");
                    return;
                }
                // 添加的提交
                await addDomain(data);
                this.$modal.msgSuccess("新增成功");
                this.dialogVisible = false;
                this.$emit("success");
            } finally {
                this.formLoading = false;
            }
        },

        /** 表单重置 */
        reset() {
            this.formData = {
                domain: "",
                status: 1,
            };
            this.resetForm("formRef");
        },
        handleClose() {
            this.reset();
        },
    },
};
</script>

<style></style>
